import { useState } from "react";
import { Cron } from "./CustomCron";
import React from "react";
import { cronValueToDisplay } from "../cronValueToDisplay";
const Template = () => {
  const [value, onChange] = useState("0 37 10 * * ?");
  const [value1, onChange1] = useState("0 0 9 ? * 1,2,7");
  const [value2, onChange2] = useState("0 0 9 1,2,19 * ?");
  const [value3] = useState("0 0/5 * * * ? ");

  return (
    <div>
      <h1>
        {cronValueToDisplay(value)} / {value}
      </h1>
      <Cron value={value} onChange={onChange} />
      <h1>
        {cronValueToDisplay(value1)} / {value1}
      </h1>
      <Cron value={value1} onChange={onChange1} />
      <h1>
        {cronValueToDisplay(value2)} / {value2}
      </h1>
      <Cron value={value2} onChange={onChange2} />
      <h1>
        {cronValueToDisplay(value3)} / {value3}
      </h1>
      <h1>{cronValueToDisplay("48 48 16/6 * * ?")} / 48 48 16/6 * * ?</h1>
    </div>
  );
};

export default Template;
